<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>增加or修改</title>
    <!-- Bootstrap core CSS -->
    <link th:href="@{/css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{/css/index.css}" rel="stylesheet">
    <link th:href="@{/css/config.css}" rel="stylesheet">
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/css/jquery.pagination.css}" rel="stylesheet">
    <!-- 表单验证 -->
    <!--<link th:href="@{/css/bootstrapValidator.css}" rel="stylesheet">-->


</head>
<style>
    body {
        background: #edf0f2;
    }

    img {
        width: 100%;
        display: block;
        border: none;
        vertical-align: bottom;
        border: none;
    }

    input[type="button"] {
        -webkit-appearance: none;
    }

    .productDrawingBox {
        background-color: #fcfcfc;
        color: #333333;
        font-size: 16px;
        height: 150px;
        padding-left: 11px;
        border-bottom: solid 1px #e5e5e5;
    }

    .productDescription {
        height: 44px;
        line-height: 44px;
    }

    .productImg {
        height: 96px;
        overflow: hidden;
    }

    .imgBiMG {
        width: 100px;
        height: 100px;
        float: left;
        display: block;
    }

    .uploadDIv {
        width: 100px;
        height: 100px;
        background-color: #edf0f2;
        font-size: 28px;
        color: #bfbfbf;
        text-align: center;
        line-height: 81px;
        float: left;
        position: relative;
    }

    .uploadDIv input {
        width: 100px;
        height: 100px;
        opacity: 0;
        position: absolute;
        right: 0px;
        top: 0px;
        z-index: 4;
        padding: 0;
    }
</style>

<body>
<!-- nav导航 -->
<div th:replace="common/bar::#header"></div>
<!-- 页面主体 -->
<div class="dh mainbox">
    <!-- 左边菜单 -->
    <div th:replace="common/bar::#menu"></div>
    <!-- 右边主显示部分 -->
    <div class="main-rightbox">
        <div class="mainrightbox">
            <!-- 路径导航 -->
            <ol class="breadcrumb">
                <li><a th:href="@{/}">首页</a></li>
                <li class="active">基础管理</li>
                <li class="active">菜单管理</li>
                <li class="active">增加编辑</li>
            </ol>
            <!-- 网页主体内容部分 -->
            <div class="main_box ioep">


                <!-- 页面双排显示 -->
                <div class="rows">
                    <div class="col-md-10 col-md-offset-1">
                        <form role="form" class="form-horizontal rows" id="form-test">

                            <div class="form-group col-md-12">
                                <label for="user" class="col-sm-2 control-label">电影名称</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="name" name="name" placeholder="请输入电影名"/>
                                </div>
                            </div>
                            <div class="form-group col-md-12">
                                <label for="email" class="col-sm-2 control-label">英文名</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="englishName" name="englishName"
                                           placeholder="请输入英文名">
                                </div>
                            </div>

                            <div class="form-group col-md-12">
                                <label for="firstname" class="col-sm-2 control-label">电影区域</label>
                                <div class="col-sm-10">

                                    <span th:each="movieArea:${movieAreas}" style="margin-left: 20px">
                                       [[${movieArea.area}]]:<input type="checkbox" name="movieAreaIds" th:value="${movieArea.getId()}">
                                    </span>

                                </div>
                            </div>

                            <div class="form-group col-md-12">
                                <label for="pwd" class="col-sm-2 control-label">电影类型</label>
                                <div class="col-sm-8">
                                    <span th:each="movieType:${movieTypes}" style="margin-left: 20px">
                                       [[${movieType.type}]]:<input type="checkbox" name="movieTypeIds" th:value="${movieType.getId()}">
                                    </span>
                                </div>
                            </div>

                            <div class="form-group col-md-12">
                                <label for="pwd" class="col-sm-2 control-label">时长(分钟)</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="duration" name="duration"
                                           placeholder="请输入时长">
                                </div>
                            </div>

                            <div class="form-group col-md-12">
                                <label for="pwd" class="col-sm-2 control-label">上映时间</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" name="releaseDate" id="releaseDate" placeholder="请输入上映时间">
                                </div>
                            </div>

                            <div class="form-group col-md-12">
                                <label for="pwd" class="col-sm-2 control-label">剧情简介</label>
                                <div class="col-sm-10">
                                    <!--<input type="text" class="form-control"   placeholder="请输入剧情简介">-->
                                    <textarea name="synopsis" style="width: 100%;height: 80px" rows="3" cols="20" id="synopsis"></textarea>
                                </div>
                            </div>
                            <div class="form-group col-md-12">
                                <label for="pwd" class="col-sm-2 control-label">导演id(使用,隔开)</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="directorsIds"  id="directorsIds" placeholder="请输入导演id">
                                </div>
                            </div>

                            <div class="form-group col-md-12">
                                <label for="pwd" class="col-sm-2 control-label">演员id:饰演者(使用,隔开)</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="actorIds" id="actorIds" placeholder="请输入导演id:饰演者">
                                </div>
                            </div>





                            <div class="form-group col-md-12">
                                <label for="pwd" class="col-sm-2 control-label">电影封面图</label>
                                        <img src="https://catdog-movie.oss-cn-beijing.aliyuncs.com/heapPortrait/default.png"
                                             style="width: 200px;height: 200px" id="previewUrl">
                                    <input id="uploadfile" type="file" style="margin-left: 180px"/>
                                    <span style="font-size:13px;color: burlywood;margin-left: 180px">支持JPG,JPEG,PNG格式,且文件需小于1M</span>
                            </div>

                            <div class="form-group col-md-12">
                                <!--<label for="pwd" class="col-sm-5 control-label">上传图片集</label>-->
                                <div class="productDrawingBox">
                                    <div class="productDescription">上传电影图片集(第一张默认主图片)</div>
                                    <div class="productImg">
                                        <div id="uploadBox"></div>
                                        <div class="uploadDIv">
                                            <span>+</span><input type="file" name="file" multiple id="inputs"
                                                                 accept="image/*" class='fileTest'/>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </form>
                        <div class="form-group col-md-12">
                            <div class="col-sm-offset-5 col-sm-2">
                                <button id="btn-test" onclick="movieAdd()" class="btn btn-primary">提交</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<!-- 引入公共js文件 -->
<script th:src="@{/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/js/jquery.slimscroll.min.js}"></script>
<script th:src="@{/js/bootstrap.js}"></script>
<script th:src="@{/js/modal.js}"></script>
<script th:src="@{/js/jquery.pagination.min.js}"></script>

<script>

    function movieAdd(){
        //封装图片集
        var movieAtlas="";
        $(".imgBiMG").each(function () {
            let src = $(this).attr("src");
            movieAtlas=movieAtlas+src+","
        })
        movieAtlas= movieAtlas.substr(0,movieAtlas.length-1)

        //封装对象
        var obj={};
        obj.movieAreaIds=[];
        obj.movieTypeIds=[];
        obj.name=$("#name").val();
        obj.englishName=$("#englishName").val();
        obj.duration=$("#duration").val();
        obj.synopsis=$("#synopsis").val();
        obj.directorsIds=$("#directorsIds").val();
        obj.actorIds=$("#actorIds").val();
        obj.releaseDate=$("#releaseDate").val();
        obj.previewUrl=$("#previewUrl").attr("src");
        obj.moviePictureSet=movieAtlas;
        //封装区域
        $("input[name=movieAreaIds]:checked").each(function () {
            obj.movieAreaIds.push($(this).val())
        })

        //封装类型
        $("input[name=movieTypeIds]:checked").each(function () {
            obj.movieTypeIds.push($(this).val())
        })



        var s=JSON.stringify(obj);
        $.ajax({
            url:"/movie/add",
            type:"post",
            contentType:"application/json",
            data:s,
            success:function (response) {
                if (response.code==0){
                    //跳转展示页
                    window.location.href="/movie/moviePagingQuery/1"
                } else {
                    alert(response.msg)
                }
            },
            error:function () {
                alert("发生异常 请稍后重试")
            }

        })

    }
    /**
     *  此方法为切换左边菜单的js文件
     */
    $(".list_dt").on("click", function () {
        $('.list_dd').stop();
        $(this).siblings("dt").removeAttr("id");
        if ($(this).attr("id") == "open") {
            $(this).removeAttr("id").siblings("dd").slideUp();
        } else {
            $(this).attr("id", "open").next().slideDown().siblings("dd").slideUp();
        }
    });

    $(function () {
        var img = []; //创建一个空对象用来保存传入的图片
        var AllowImgFileSize = '101376'; //1兆
        $("#inputs").change(function () {
            var fil = this.files;
            for (var i = 0; i < fil.length; i++) {
                var curr = $('#inputs')[i].files[0].size;
                if (curr > AllowImgFileSize * 101376) { //当图片大于1兆提示
                    layer.msg("图片文件大小超过限制 请上传小于99M的文件");
                } else {
                    img.push($('#inputs')[i].files[0]); //将传入的图片push到空对象中
                }
            }
            if (img.length >= 5) { //判断图片的数量，数量不能超过3张
                $('.uploadDIv').hide();
            } else {
                $('.uploadDIv').show();
            }
        });


        //图片上传
        $("#inputs").change(function () {
            var file = $("#inputs").val();
            if (file != null && file != '') {
                var str = $("#inputs").val().toString();
                var imgType = str.substr(str.indexOf("."), str.length)
                //获取oss传输签名
                $.ajax({
                    url: "/oss/policy/moviePictureSet",
                    async: false,
                    data: {
                        imgType: imgType
                    },
                    success: function (data) {
                        //保存数据
                        //获得图片文件
                        var request = new FormData();
                        var file = document.getElementById("inputs");
                        var filObj = file.files[0];
                        //上传文件参数
                        request.append("key", data.key)
                        request.append("policy", data.policy)
                        request.append("signature", data.signature)
                        request.append("ossaccessKeyId", data.accessid)
                        request.append("dir", data.dir)
                        request.append("host", data.host)
                        request.append("name", data.name)
                        request.append("success_action_status", 200)
                        request.append("file", filObj);

                        //保存图片
                        $.ajax({
                            url: "https://catdog-movie.oss-cn-beijing.aliyuncs.com",
                            enctype: "multipart/form-data",
                            processData: false,
                            cache: false,
                            async: false,
                            contentType: false,
                            type: 'post',
                            data: request,
                            success: function (request) {
                                document.getElementById("uploadBox").innerHTML += "<div class='divImg' id='uploadImg'><img src='" + data.url + "' class='imgBiMG'></div>";
                            }
                        })
                    }
                })

            } else {
                alert('请选择文件！');
            }
        })

        $("#uploadfile").change(function () {
            var file = $("#uploadfile").val();
            if (file != null && file != '') {
                var str = $("#uploadfile").val().toString();
                var imgType = str.substr(str.indexOf("."), str.length)
                //获取oss传输签名
                $.ajax({
                    url: "/oss/policy/moviePictureSet",
                    async: false,
                    data: {
                        imgType: imgType
                    },
                    success: function (data) {
                        //保存数据
                        //获得图片文件
                        var request = new FormData();
                        var file = document.getElementById("uploadfile");
                        var filObj = file.files[0];
                        //上传文件参数
                        request.append("key", data.key)
                        request.append("policy", data.policy)
                        request.append("signature", data.signature)
                        request.append("ossaccessKeyId", data.accessid)
                        request.append("dir", data.dir)
                        request.append("host", data.host)
                        request.append("name", data.name)
                        request.append("success_action_status", 200)
                        request.append("file", filObj);
                        //保存图片
                        $.ajax({
                            url: "https://catdog-movie.oss-cn-beijing.aliyuncs.com",
                            enctype: "multipart/form-data",
                            processData: false,
                            cache: false,
                            async: false,
                            contentType: false,
                            type: 'post',
                            data: request,
                            success: function (request) {
                                $("#previewUrl").attr("src", data.url);
                            }
                        })
                    }
                })
            } else {
                alert('请选择文件！');
            }
        })
    })


</script>
</body>

</html>